<template>
  <div>
    <div class="container" ref="container">
      <span class="title">违纪设置</span>
      <el-card class="main-card">
        <el-table :data="paginatedData" style="width: 100%; margin-top: 20px">
          <el-table-column prop="id" label="序号" width="250" header-align="center" align="center" class="table-header"></el-table-column>
          <el-table-column prop="violationType" width="450" label="违纪总类" header-align="center" align="center" class="table-header"></el-table-column>
          <el-table-column prop="subViolationCount" width="450" label="下属违纪行为数量" header-align="center" align="center" class="table-header"></el-table-column>
          <el-table-column label="操作" header-align="center" align="center" width="250">
            <template slot-scope="scope">
              <el-button size="small" @click="goToDetails">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            :page-sizes="[10, 20]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { TypeVio, NumVio } from '../../../../api/api'

export default {
  name: 'ViolationSettings',
  data () {
    return {
      tableData: [],
      total: 0,
      pageSize: 20,
      currentPage: 1,
      isAddEditDialogVisible: false,
      isDeleteDialogVisible: false,
      dialogTitle: '',
      currentRecord: {
        id: null,
        violationType: '',
        subViolationCount: 0
      },
      recordToDelete: null
    }
  },
  computed: {
    paginatedData () {
      return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    async fetchData () {
      const categoriesResponse = await TypeVio()
      const countsResponse = await NumVio()
      this.tableData = categoriesResponse.map((category, index) => ({
        id: index + 1,
        violationType: category,
        subViolationCount: countsResponse[index]
      }))
      this.total = this.tableData.length
    },
    goToDetails () {
      this.$router.push({ name: 'plus' })
    },
    saveRecord () {
      if (this.currentRecord.id === null) {
        this.currentRecord.id = this.tableData.length + 1
        this.tableData.push(this.currentRecord)
      } else {
        const index = this.tableData.findIndex(item => item.id === this.currentRecord.id)
        if (index !== -1) {
          this.tableData.splice(index, 1, this.currentRecord)
        }
      }
      this.isAddEditDialogVisible = false
    },
    confirmDeleteRecord () {
      const index = this.tableData.findIndex(item => item.id === this.recordToDelete.id)
      if (index !== -1) {
        this.tableData.splice(index, 1)
      }
      this.isDeleteDialogVisible = false
    },
    handlePageChange (page) {
      this.currentPage = page
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.currentPage = 1
    },
    handleJumpPage () {
      const page = parseInt(this.jumpPage)
      if (page >= 1 && page <= Math.ceil(this.total / this.pageSize)) {
        this.currentPage = page
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>

<style scoped>
.container {
  min-width: 1666px;
  width: 100%;
  top: 0px;
  left: 7px;
  background: #eeeeee;
  padding: 20px;
  border-radius: 8px;
  max-height: 900px;
  overflow-y: auto;
}
.title {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 15px;
  display: block;
}
.main-card {
  padding: 20px;
  overflow: auto;
}
.table-header {
  background-color: #f5f5f5;
  height: 50px;
  font-size: 16px;
}

.pagination-container {
  height: 100px;
  position: relative;
  display: flex;
  align-items: center;
}
.dialog-footer {
  text-align: right;
}
</style>
